<template>
	<div>
		<app-header></app-header>
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="(item,index) in bannerList" :key=index>
				<img :src="item.images" alt="">
			</mt-swipe-item>
		</mt-swipe>
		<ul class="list_logo">
			<li v-for="(item,index) in iconImg" :key='index' @click="handClick(item.Id,item.name,item.href,item.priority,index)">
				<img :src='item.images'>
				<br>
				<span>{{item.name}}</span>
			</li>
		</ul>
		<div class="recommend">
			<h4>天乐推荐</h4>
			<div class="recommend_img">
				<img src="http://web.tl178.cn/Public/admin/images/15005138311500513831.png">
			</div>
			<div class="recommend_img">
				<img src="http://web.tl178.cn/Public/admin/images/15033812181503381218.jpg">
			</div>
		</div>
		<div class="selected_projects">
			<h3>精选项目</h3>
			<img src='../../static/img/index/index-11.png' id="click_login">
			<img src="../../static/img/xiajiantou.png" class="bottom">
		</div>
		<!--项目列表-->
		<div class="project_list" v-for="(item,index) in houseList" :key=index>
			<div class="project_img">
				<ul>
					<li v-for="(item2,index) in item.labels" :key=index :style='{background:item2.color}'>{{item2.name}}</li>
				</ul>
				<img :src="item.images" class="img" />
				<div class="project_aixin">
					<i class="iconfont icon-aixin">&nbsp;&nbsp;{{item.cang}}</i>
				</div>
				<div class="project_name">
					<span class="span1">{{item.name}}</span>
					<span class="span2"><b>{{item.ck_price}}</b><i>{{item.price_type}}</i></span>
				</div>
			</div>
			<p class="p1">{{item.describes}}</p>
			<p class="p2">地址：{{item.new_addr}}</p>
		</div>
		<div class="select_logo"></div>
		<h4 class="h4">
			旅居线路
			<i class="iconfont icon-jiantouxia"></i>
		</h4>
		<div class="join_people">
			<span>已有<b>{{tuanNum?tuanNum:0}}人</b>成功报名&nbsp;&nbsp;<strong>|</strong></span>
			<div>
				<mt-swipe class='join_People' :auto="4000">
					<mt-swipe-item :key='index' v-for="(item,index) in tuanList">
						{{item.tel}}{{item.username}}
					</mt-swipe-item>
				</mt-swipe>
			</div>
		</div>
		<!-- 线路列表 -->
		<div class="project_list2" :key=item.index v-for="item in routeList">
			<!-- <div class="Remaining" v-show="item.expire==1">
				<p>该线路{{item.maximum}}人满团</p>
				<p><i class="iconfont icon-shijian">离报名结束还剩：<span class="times" data-info="{{item.cut-today}}"></span></i></p>
			</div> -->
			<div class="project_img">
				<ul>
					<li :style="{background:item2.color}" :key=item2.index v-for="item2 in item.labels">{{item2.name}}</li>
				</ul>
				<img :src="item.images" class="img" />
				<div class="project_aixin">
					<i class="iconfont icon-xing">&nbsp;{{item.star}}</i>
					<i class="iconfont icon-aixin">&nbsp;{{item.member_favorite}}</i>
					<i class="iconfont icon-conversation_icon">&nbsp;{{item.comment}}</i>
				</div>
				<div class="project_name">
					<span class="span1">{{item.title}}</span>
					<span class="span2">¥<b>{{item.shi_price}}</b><i>/人起</i></span>
					<p>{{item.intros}}<span>月销:{{item.month_sales}}</span></p>
				</div>
			</div>
			<div class="tuan_name">
				<img :src="item.group_img" />
				<p>
					<span>{{item.group_name}}</span><br />
					<span>报名人数：{{item.road_apply}}&nbsp;&nbsp;&nbsp;<b v-show="item.maximum-item.road_apply>0" style="color: #FE8A76;font-weight: normal;">剩余人数：{{item.maximum-item.road_apply}}</b></span>
				</p>
				<span class="start_time">{{item.group_start}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Public/Header'
	export default {
		name: 'Home',
		data() {
			return {
				bannerList: [],
				iconImg: [],
				houseList: [],
				tuanNum: 0,
				tuanList: [],
				routeList: []
			}
		},
		created() {

			//获取轮播图数据
			this.$axios.get('Picture/slideshow')
				.then(res => {
					this.bannerList = res.data
				})
				.catch(err => console.log(err))
			//获取八个推荐数据
			this.$axios.get('Picture/icon')
				.then(res => {
					this.iconImg = res.data
				})
				.catch(err => console.log(err))
			//天乐推荐
			this.$axios.get('Picture/recommend')
				.then(res => {

				})
				.catch(err => console.log(err))
			//精选项目内容
			this.$axios.get('House/houses')
				.then(res => {
					this.houseList = res.data
				})
				.catch(err => console.log(err))
			//路线参团滚动信息
			this.$axios.get('House/look')
				.then(res => {
					this.tuanNum = res.data.num
					this.tuanList = res.data.list
				})
				.catch(err => console.log(err))
			//路线列表信息
			this.$axios.get('House/roadlist')
				.then(res => {
					this.routeList = res.data.list
				}).catch(err => console.log(err))
		},
		methods: {
			handClick(id, name, href, priority, index) {
				if (priority == 1) {
					window.location.href = href
				} else {
					this.$router.push({
						name: 'ServiceList',
						params: {
							id: id,
							name: name,
							index: index + 1
						}
					})
				}
			},
		},
		components: {
			'app-header': Header,
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				document.body.scrollTop = document.documentElement.scrollTop = vm.scrollTop
				vm.$emit('footer', true) //回到home页面的时候通过路由钩子函数来让头部显示
			})
		},
		beforeRouteLeave(to, from, next) {
			this.scrollTop = document.documentElement.scrollTop
			document.documentElement.scrollTop = 0
			next()
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.wh(@w, @h) {
		width: @w;
		height: @h;
	}

	a {
		color: #FE8975
	}

	.list_logo {
		width: 100%;
		height: 3.6rem;
		border-top: 0.2rem solid #F6F6F6;
		border-bottom: 0.2rem solid #F6F6F6;

		li {
			float: left;
			text-align: center;
			width: 25%;
			height: 1.8rem;

			img {
				margin-top: 0.1rem;
				width: 1rem;
				height: auto;
			}

			span {
				font-size: 0.32rem;
				color: #949494;
			}
		}
	}

	.select_logo {
		width: 100%;
		border-bottom: 0.2rem solid #F6F6F6;
	}

	.recommend {
		width: 100%;
		height: 4.2rem;
		border-bottom: 0.2rem solid #F6F6F6;

		h4 {
			width: 90%;
			height: 0.8rem;
			line-height: 0.74rem;
			padding-left: 0.22rem;
			font-size: 0.38rem;
			color: #404040;
		}

		.recommend_img {
			position: relative;
			float: left;
			width: 47%;
			height: auto;
			margin-left: 2%;

			img {
				width: 100%;
				height: 100%;
				border-radius: 0.15rem;
			}

			.recommend_shadow {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.6);
				text-align: center;
				color: #fff;
				line-height: 2rem;
				font-size: 0.32rem;
				border-radius: 0.15rem;
			}
		}
	}

	.selected_projects {
		overflow: hidden;
		width: 100%;
		height: 1.2rem;
		line-height: 1.2rem;

		h3 {
			margin-left: 0.2rem;
			float: left;
			font-size: 0.38rem;
		}

		#click_login {
			margin-left: 40%;
			float: left;
			margin-top: 0.3rem;
			width: 2.5rem;
			height: auto;
		}

		.bottom {
			float: right;
			margin-right: 0.4rem;
			margin-top: 0.5rem;
			width: 0.53rem;
			height: auto;
		}
	}

	.project_list {
		position: relative;

		.project_img {
			.wh(96%, 4.5rem);
			position: relative;
			margin: 0 2%;

			.img {
				.wh(100%, 4.5rem);
			}

			ul {
				width: 65%;
				position: absolute;

				li {
					float: left;
					font-size: 0.32rem;
					padding: 0.06rem 0.14rem;
					border-radius: 0.1rem;
					color: #fff;
					margin-top: 0.22rem;
					margin-left: 0.12rem;
				}

				li:nth-of-type(1) {
					//              background: #fe8a76;
					margin-left: 0.2rem;
				}
			}

			.project_aixin {
				position: absolute;
				right: 0;
				top: 0.22rem;
				color: #fff;

				i {
					padding: 0.12rem 0.1rem;
					background: rgba(0, 0, 0, 0.6);
					border-top-left-radius: 1rem;
					border-bottom-left-radius: 1rem;
					font-size: 0.36rem;
				}
			}

			.project_name {
				position: absolute;
				.wh(6rem, 0.7rem);
				color: #fff;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.6);
				line-height: 0.7rem;

				.span1 {
					font-size: 0.32rem;
					margin-left: 0.16rem;
				}

				.span2 {
					float: right;
					margin-right: 0.3rem;
					font-size: 0.32rem;

					b {
						font-size: 0.32rem;
						color: #FE8975;
					}

					i {
						font-style: normal;
						color: #FE8975;
					}
				}
			}
		}

		.p1 {
			margin-left: 0.2rem;
			font-size: 0.32rem;
			margin-top: 0.06rem;
		}

		.p2 {
			font-size: 0.32rem;
			margin-left: 0.2rem;
			margin-top: 0.06rem;
			margin-bottom: 0.1rem;
		}
	}

	.h4 {
		position: relative;
		text-align: center;
		font-size: 0.32rem;
		line-height: 0.92rem;

		.icon-jiantouxia {
			float: right;
			position: absolute;
			right: 0.3rem;
			top: 0;
			font-size: 0.38rem;
			color: #bdbdbd;
		}
	}

	.join_people {
		.wh(90%, 0.8rem);
		margin: 0 5%;
		border-radius: 1rem;
		-webkit-border-radius: 1rem;
		border: 0.01rem solid #F6F6F6;
		background: #F6F6F6;
		line-height: 0.8rem;
		margin-top: 0.1rem;
		margin-bottom: 0.3rem;

		span {
			float: left;
			font-size: 0.32rem;
			margin-left: 0.3rem;

			b {
				font-weight: normal;
				color: #FE8975;
			}

			strong {
				font-weight: normal;
				color: #dfdfdf;
			}
		}

		.join_People {
			float: left;
			margin-left: 0.1rem;
			.wh(48%, 1rem);

			.mt-swipe-item {
				.wh(100%, auto);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-size: 0.32rem;
				color: #939393;
			}
		}
	}

	.project_list2 {
		position: relative;
		height: auto;
		overflow: hidden;

		.Remaining {
			.wh(100%, 1.05rem);
			background: #F6F6F6;

			p:nth-of-type(1) {
				font-size: 0.32rem;
				color: #989898;
				padding-left: 0.2rem;
				padding-top: 0.1rem;
			}

			p:nth-of-type(2) {
				color: #FE8A76;
				line-height: 0.6rem;

				i {
					font-size: 0.32rem;
					padding-left: 0.2rem;
				}
			}
		}

		.project_img {
			.wh(96%, 4.5rem);
			position: relative;
			padding: 0 2%;

			.img {
				.wh(100%, 4.5rem);
			}

			ul {
				position: absolute;

				li {
					float: left;
					font-size: 0.36rem;
					padding: 0.06rem 0.14rem;
					border-radius: 0.1rem;
					color: #fff;
					margin-top: 0.22rem;
				}

				li:nth-of-type(1) {
					background: #fe8a76;
					margin-left: 0.2rem;
				}

				li:nth-of-type(2) {
					background: #608baf;
					margin-left: 0.12rem;
				}

				li:nth-of-type(3) {
					background: #fecb02;
					margin-left: 0.12rem;
				}
			}

			.project_aixin {
				position: absolute;
				right: 0;
				top: 0.22rem;
				margin-right: 0.2rem;
				color: #fff;
				.wh(42%, 0.7rem);
				border-top-left-radius: 1rem;
				border-bottom-left-radius: 1rem;
				background: rgba(0, 0, 0, 0.6);

				i {
					line-height: 0.7rem;
					padding: 0.12rem 0;
					margin-left: 0.2rem;
					font-size: 0.35rem;
				}
			}

			.project_name {
				position: absolute;
				.wh(96%, 1.2rem);
				margin-left: 0.2rem;
				color: #fff;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.6);

				.span1 {
					font-size: 0.32rem;
					margin-left: 0.16rem;
					display: inline-block;
					margin-top: 0.15rem;
				}

				.span2 {
					float: right;
					margin-top: 0.15rem;
					margin-right: 0.3rem;
					font-size: 0.32rem;
					display: inline-block;
					color: #FE8975;

					b {
						font-size: 0.28rem;
					}

					i {
						font-style: normal;
					}
				}

				p {
					.wh(100%, auto);
					margin-top: 0.05rem;
					margin-left: 0.16rem;
					font-size: 0.32rem;

					span {
						float: right;
						margin-right: 0.4rem;
					}
				}
			}
		}

		.tuan_name {
			float: left;
			.wh(100%, 1.2rem);

			img {
				margin-top: 0.1rem;
				margin-left: 0.2rem;
				border-radius: 50%;
				.wh(0.7rem, auto);
			}

			p {
				margin-top: 0.1rem;
				font-size: 0.32rem;
				display: inline-block;
			}

			.start_time {
				float: right;
				margin-right: 0.3rem;
				font-size: 0.32rem;
				color: #FE8975;
				line-height: 0.8rem;
			}
		}
	}
</style>
